<template>
  <div class="yard-map-demo-wrapper">
    <!--<h1>Yard Map</h1>-->
    <div class="yard-map-demo" id="yard-map-demo">
      <!--停车位区-->
      <div class="tingchewei">
        <div class="bg-text">停车区</div>

        <div class="guizi-wrapper" v-for="item in tingCheWeiList" :key="item.no" @click="showTingCheWeiInfo(item)" :class="{'no-usable': !item.status}">
          <div class="guizi-box" v-if="getGuiziItem(item).isShow" @click="showGuiziInfo(getGuiziItem(item).data, $event)">{{ getGuiziItem(item).data.no }}</div>

          <div v-if="!item.status" style="text-align: center;">不可用的</div>

          <!--停车位编号-->
          <div class="yue-tai--no ting-che-wei-no">{{item.iIndex}}</div>
        </div>
      </div>

      <!--月台区-->
      <div class="yuetai">
        <div class="bg-text">月台区</div>

        <div class="guizi-wrapper" v-for="item in yueTaiList" :key="item.no" @click="showYueTaiInfo(item)" :class="{'no-usable': !item.status}">
          <div class="guizi-box" v-if="getGuiziItem(item).isShow" @click="showGuiziInfo(getGuiziItem(item).data, $event)">{{ getGuiziItem(item).data.no }}</div>

          <div v-if="!item.status" style="text-align: center;">仓库门</div>

          <!--月台编号-->
          <div class="yue-tai--no" v-if="item.status">{{item.iIndex}}</div>
        </div>
      </div>

      <!--仓库-->
      <div class="warehouse-wrapper">
        <div class="bg-text">仓库区</div>
      </div>

      <!--月台区-->
      <div class="yuetai bottom-yuetai">
        <div class="bg-text">月台区</div>

        <div class="guizi-wrapper" v-for="item in yueTaiList_bottom" :key="item.no" @click="showYueTaiInfo(item)" :class="{'no-usable': !item.status}">
          <div class="guizi-box" v-if="getGuiziItem(item).isShow" @click="showGuiziInfo(getGuiziItem(item).data, $event)">{{ getGuiziItem(item).data.no }}</div>

          <div v-if="!item.status" style="text-align: center;">仓库门</div>

          <!--月台编号-->
          <div class="yue-tai--no" v-if="item.status">{{item.iIndex}}</div>
        </div>
      </div>

      <!--停车位区-->
      <div class="tingchewei bottom-tingchewei">
        <div class="bg-text">停车区</div>

        <div class="guizi-wrapper" v-for="item in tingCheWeiList_bottom" :key="item.no" @click="showTingCheWeiInfo(item)" :class="{'no-usable': !item.status}">
          <div class="guizi-box" v-if="getGuiziItem(item).isShow" @click="showGuiziInfo(getGuiziItem(item).data, $event)">{{ getGuiziItem(item).data.no }}</div>

          <div v-if="!item.status" style="text-align: center;">不可用的</div>

          <!--停车位编号-->
          <div class="yue-tai--no ting-che-wei-no">{{item.iIndex}}</div>
        </div>
      </div>


      <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        :width="500"
      >
        <div>
          <el-descriptions
            :column="1"
            border
          >
            <template v-if="dialogData.type === 'guizi'">
              <el-descriptions-item label="柜子编号">{{dialogData.no}}</el-descriptions-item>
              <el-descriptions-item :label="dialogData.tingCheWeiNo?'车位编号': '月台编号'">{{showUpper(dialogData.yueTaiNo || dialogData.tingCheWeiNo)}}</el-descriptions-item>
            </template>

            <template v-else>
              <el-descriptions-item :label="dialogData.type === 'yuetai'? '月台编号': '车位编号'">{{showUpper(dialogData.no)}}</el-descriptions-item>
              <el-descriptions-item :label="'状态'">{{dialogData.status?'正常':'不可用'}}</el-descriptions-item>
            </template>

          </el-descriptions>
        </div>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import { ElMessage } from "element-plus";

export default {
  name: 'App',
  components: {

  },
  data(){
    return {
      yueTaiList:[],
      tingCheWeiList:[],
      yueTaiList_bottom:[],
      tingCheWeiList_bottom:[],
      guiziList:[
        {no:3, yueTaiNo: 'yueTaiNo10'},
        {no:1, yueTaiNo: 'yueTaiNo1'},
        {no:2, yueTaiNo: 'yueTaiNo5'},
        {no:4, tingCheWeiNo: 'tingCheWeiNo5'},
        {no:5, tingCheWeiNo: 'tingCheWeiNo1'},
        {no:6, tingCheWeiNo: 'tingCheWeiNo-bottom1'},
        {no:7, tingCheWeiNo: 'tingCheWeiNo-bottom12'},
        {no:8, tingCheWeiNo: 'tingCheWeiNo-bottom13'},
        {no:9, tingCheWeiNo: 'yueTaiNo-bottom13'},
        {no:10, tingCheWeiNo: 'yueTaiNo-bottom2'},
        {no:11, tingCheWeiNo: 'yueTaiNo-bottom3'},
        {no:12, tingCheWeiNo: 'tingCheWeiNo10'},
        {no:13, tingCheWeiNo: 'tingCheWeiNo18'},
        {no:14, tingCheWeiNo: 'tingCheWeiNo19'},
        {no:15, tingCheWeiNo: 'tingCheWeiNo11'},
        {no:16, tingCheWeiNo: 'tingCheWeiNo6'},
        {no:17, tingCheWeiNo: 'tingCheWeiNo7'},
        {no:18, tingCheWeiNo: 'yueTaiNo2'},
        {no:19, tingCheWeiNo: 'yueTaiNo3'},
        {no:20, tingCheWeiNo: 'yueTaiNo6'},
      ],
      dialogVisible: false,
      dialogTitle:'',
      dialogData:{},
    }
  },

  mounted(){

    for(let i=1;i<=20;i++){
      this.yueTaiList.push({no: 'yueTaiNo' + i, iIndex: i, type: 'yueTai', status: i !== 17 && i !== 4});
    }

    for(let i=1;i<=20;i++){
      this.tingCheWeiList.push({no: 'tingCheWeiNo' + i, iIndex: i, type: 'tingCheWei', status: true});
    }

    for(let i=1;i<=20;i++){
      this.yueTaiList_bottom.push({no: 'yueTaiNo-bottom' + i, iIndex: i, type: 'yueTai', status: i !== 17 && i !== 4});
    }

    for(let i=1;i<=20;i++){
      this.tingCheWeiList_bottom.push({no: 'tingCheWeiNo-bottom' + i, iIndex: i, type: 'tingCheWei', status: true});
    }

    this.$nextTick(() => {
      const allWrapper = document.querySelectorAll(".guizi-wrapper")
      for(let i=0;i<allWrapper.length;i++){
        // console.log('allWrapper[i]:',allWrapper[i])
        new Sortable(allWrapper[i], {
          group: "shared",
          draggable: ".guizi-box",
          // handle:'.guizi-box',
          // filter: '.el-icon',
          animation: 300,
          onEnd: ({newIndex, oldIndex}) => {
            console.log('newIndex, oldIndex:',newIndex, oldIndex)
          },
          onMove:(evt, originalEvent) => {
            console.log('originalEvent:', evt, originalEvent)
            // 如果改区域已经有柜子了，就不允许再放置柜子
            if(evt.to?.querySelector('.guizi-box')){
              console.log('xxx:',evt.related.querySelector('.guizi-box'))
              ElMessage.closeAll();
              // this.$message.warning('该区域已经有柜子了，不允许再放置柜子')
              return false;
            }

            if(evt.to?.classList.contains('no-usable')){
              return false;
            }

          }
        });
      }

    })

  },

  methods:{
    getGuiziItem(yueTaiItem){
      const guiziItem = this.guiziList.find(item => item.yueTaiNo === yueTaiItem.no || item.tingCheWeiNo === yueTaiItem.no)
      if(guiziItem){
        return {
          isShow: true,
          data: {...guiziItem}
        }
      }

      return {
        isShow: false,
        data: {},
      };
    },

    showGuiziInfo(data, $event){
      console.log('data:',data)
      $event.stopPropagation();
      this.dialogVisible = true
      this.dialogTitle = '柜子信息'
      this.dialogData = {...data, type:'guizi'}
    },

    showYueTaiInfo(item){
      console.log('item:',item)

      this.dialogVisible = true
      this.dialogTitle = '月台信息'
      this.dialogData = {...item, type:'yuetai'}
    },

    showTingCheWeiInfo(item){
      console.log('item:',item)

      this.dialogVisible = true
      this.dialogTitle = '车位信息'
      this.dialogData = {...item, type: 'tingchewei'}
    },

    showUpper(str){
      return str?.toUpperCase();
    },

  },
}
</script>

<style lang="scss">

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  @mixin bg-text(){
    .bg-text{
      font-size: 80px;
      text-align: center;
      position: absolute;
      width: 100%;
      height: 80px;
      line-height: 80px;
      top:50%;
      transform: translateY(-50%);
      color: rgba(30, 30, 30, 0.15);
      letter-spacing: 50px;
      z-index: 0;
    }
  }

  .yard-map-demo-wrapper{
    padding-top:5px;
    h1{
      text-align: center;
      font-size: 30px;
      line-height: 30px;
    }
  }
  .yard-map-demo{
    background: #a2a3a8;
    margin:0px auto 0;
    min-height: 300px;
    width: 850px;
    padding: 10px;

    .guizi-wrapper{
      width: 30px;
      height: 72px;
      border:1px solid #ffffff;
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
      z-index: 2;

      &.no-usable{
        background: rgb(104 84 70 / 53%);
        cursor: not-allowed;
        color: #565656;
      }

      .guizi-box{
        background: #1e3362;
        width: 100%;
        height: 100%;
        color: #ffffff;
        text-align: center;
        padding-top: 10px;
      }
      .yue-tai--no{
        position: absolute;
        top: -25px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        width: 100%;
        color: #ffffff;
        font-size: 12px;

        &.ting-che-wei-no{
          top: initial;
          bottom: -25px;
        }
      }
    }

    .yuetai{
      display: flex;
      justify-content: left;
      padding:30px 10px 0px;
      flex-wrap: wrap;
      border:3px solid #383838;
      position: relative;

      @include bg-text;

      &.bottom-yuetai{
        padding:10px 10px 30px;
        .yue-tai--no{
          top:initial;
          bottom: -25px;
        }
      }
    }


    .tingchewei{
      display: flex;
      justify-content: left;
      padding: 10px 10px 5px;
      margin-bottom:50px;
      flex-wrap: wrap;
      border:3px solid #383838;
      position: relative;

      @include bg-text;

      .guizi-wrapper{
        margin-bottom: 30px;
      }

      &.bottom-tingchewei{
        padding: 30px 10px 5px;
        margin-top: 50px;
        margin-bottom: initial;

        .guizi-wrapper{
          margin-bottom: 10px;
        }

        .yue-tai--no{
          top:-25px;
          bottom: initial;
        }
      }
    }

    /*仓库*/
    .warehouse-wrapper{
      height: 150px;
      position: relative;
      border-left:3px solid #383838;
      border-right:3px solid #383838;

      @include bg-text;

      .bg-text{
        color: #555;
      }
    }

  }
}
</style>
